$monokai-color-background: #272822;
$monokai-color-text: #fffff9;
$monokai-color-text-dark: #ffffff;
$monokai-color-key: #F92672;
$monokai-color-value: #a6e22e;
$monokai-color-url: #8ac21b;
$monokai-color-null: #AE81FF;

body[data-theme="monokai"], #themeChooserPreview[data-theme="monokai"] {
  background-color: $monokai-color-background;
  .expander {
    color: $monokai-color-text;
  }
  #gutter {
    background: $monokai-color-text;
    opacity: 0.15;
  }
  [line-number]:before {
    color: $monokai-color-text;
  }
  /* SYNTAX HIGHLIGHTING */
  #formattedJson, #jsonpOpener, #jsonpCloser {
    color: $monokai-color-text-dark;
  }
  #formattedJson {
    color: $monokai-color-text;
  }
  .objProp {
    color: $monokai-color-key;
  }
  .s {
    color: $monokai-color-value;
  }
  .key {
    color: $monokai-color-key;
  }
  pre {
    color: $monokai-color-text;
  }
  a:hover, a:active {
    color: $monokai-color-url;
  }
  .bl, .nl, .n {
    color: $monokai-color-null;
  }
  .nested:after {
    background-color: $monokai-color-null;
    color: $monokai-color-background;
  }

  #formattingMsg {
    color: $monokai-color-text-dark;
  }

  #status {
    border-color: $monokai-color-text-dark;
    background-color: $monokai-color-text;
    color: $monokai-color-background;
  }
}